<!-- 我的视图 -->

<template>
  <div
    ref="view"
    v-bind="viewProps"
    @mousedown="mouseDown"
    @mouseup="mouseUp"
    @mousemove="mouseMove"
    @mousewheel="mouseWheel"
    @contextmenu.prevent="CORE.doNothing"
  >
    <ViewBackground cover @loaded="toLoaded">
      <ViewAlarm v-for="item in alarmList" :key="`${item.id}-${item.alarm.id}`" :obj="item" />
    </ViewBackground>

    <ViewRuler />
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import MapView from '@admin/views/Secure/mixMap/MapView'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MapView',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [
    MapView,
    CORE.mixWeb(),
  ],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 告警列表
     */
    alarmList() {
      const { map_list, list } = this
      const alarmList = list.map((alarm) => {
        const point = map_list.find((item) => item.deviceId === alarm.alarmResId)
        return point ? { ...point, alarm } : null
      })
      return alarmList.filter((item) => item)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
